<template>
  <h3>我是app组件</h3>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>工作种类:{{ person.job.type }}</h2>
  <h2>工作薪水:{{ person.job.salary }}</h2>
  <h2>爱好:{{ person.hobby }}</h2>
  <h2>测试c的数据未:{{ person.job.a.b.c }}</h2>
  <button @click="changeInfo">修改这些人的信息</button>
</template>

<script>

import {reactive} from "vue";

export default {
  name: 'App',
  setup() {
    //普通对象:ref引用对象,实现响应式的
    /*let name = ref('张三')
    let age = ref(18)
    //对象类型的:proxy实现响应式的
    let job = reactive({
      type: '前端工程师',
      salary: '30K',
      a: {
        b: {
          c: 888
        }
      }
    })
    let hobby = reactive(['抽烟','喝酒','烫头'])*/

    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '30K',
        a: {
          b: {
            c: 888
          }
        }
      },
      hobby:['抽烟','喝酒','烫头']
    })

    //方法
    function changeInfo() {

      person.name = '李四'
      person.age = 20

      person.job.type = 'UI设计师'
      person.job.salary = '50K'
      person.job.a.b.c = 999
      person.hobby[0] = '学习'
      //console.log(name, age)
      //console.log(job)
    }

    return {
      changeInfo,
      person
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
